<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #999;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Helper function to draw an arrow ---
        function drawArrow(x1, y1, x2, y2, headlen = 10) {
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            
            // Draw the line
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            // Draw the arrowhead
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Define coordinates and styles ---
        const origin = { x: 280, y: 220 };
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // 1. Draw the plane (shaded parallelogram)
        ctx.fillStyle = '#e0e0e0';
        ctx.beginPath();
        const p1 = { x: 150, y: 220 };
        const p2 = { x: 460, y: 220 };
        const p3 = { x: 340, y: 307 };
        const p4 = { x: 30, y: 307 };
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.lineTo(p3.x, p3.y);
        ctx.lineTo(p4.x, p4.y);
        ctx.closePath();
        ctx.fill();
        ctx.strokeStyle = 'black'; // Reset stroke color for outlines
        ctx.stroke(); // Draw the outline of the plane

        // 2. Draw the unlabeled diagonal line on the plane
        ctx.beginPath();
        ctx.moveTo(160, 160);
        ctx.lineTo(400, 280);
        ctx.stroke();
        
        // 3. Draw the coordinate axes
        // Y-axis
        drawArrow(origin.x, origin.y, 480, 220);
        // Z-axis
        drawArrow(origin.x, origin.y, 280, 50);
        // X-axis
        drawArrow(origin.x, origin.y, 100, 350);

        // 4. Draw the labels for the axes
        ctx.font = 'italic 20px serif';
        ctx.fillText('y', 485, 225);
        ctx.fillText('z', 285, 55);
        ctx.fillText('x', 90, 360);
        
        // 5. Draw the current vector K(t)
        ctx.lineWidth = 2;
        const k_start = { x: 230, y: 235 };
        const k_end = { x: 260, y: 270 };
        drawArrow(k_start.x, k_start.y, k_end.x, k_end.y, 8);
        ctx.lineWidth = 1.5; // Reset line width

        // 6. Draw the label for the vector K(t)
        ctx.font = 'italic bold 22px serif';
        ctx.fillText('K(t)', 200, 255);
        
        // Draw the vector arrow symbol over the 'K'
        ctx.lineWidth = 1.5;
        drawArrow(200, 240, 215, 240, 6);

    </script>
</body>
</html>